Pure.CSS একটি লাইটওয়েট এবং মোডুলার CSS ফ্রেমওয়ার্ক যা সহজেই Flexbox ইন্টিগ্রেশন সমর্থন করে। Flexbox হল একটি আধুনিক CSS লেআউট মডেল যা উপাদানগুলিকে এক্সট্রিমলি ফ্লেক্সিবল ও রেসপনসিভভাবে অ্যারে করতে সহায়তা করে। Flexbox ব্যবহারের মাধ্যমে উপাদানগুলি তাদের কন্টেইনারে সাজানো, কেন্দ্রিত করা এবং রিসাইজিং সহজ হয়। Pure.CSS ফ্রেমওয়ার্কের মধ্যে Flexbox এর সাপোর্ট থাকার কারণে, আপনি দ্রুত এবং কার্যকরভাবে ফ্লেক্সিবল লেআউট তৈরি করতে পারবেন।
এখানে Pure.CSS এর Flexbox Integration এবং বিভিন্ন Flexbox Layout তৈরির পদ্ধতি নিয়ে বিস্তারিত আলোচনা করা হয়েছে।
Flexbox Integration in Pure.CSS:
Pure.CSS ফ্রেমওয়ার্কে Flexbox সমর্থিত এবং বিভিন্ন ধরনের ফ্লেক্সিবল লেআউট তৈরি করার জন্য pure-g (গ্রিড কন্টেইনার) এবং pure-u-* (গ্রিড আইটেম) ক্লাস ব্যবহৃত হয়। যদিও Pure.CSS নিজে একটি গ্রিড সিস্টেম প্রদান করে, তবুও Flexbox ব্যবহার করলে আপনি আরও বেশি কাস্টমাইজেশন এবং নিয়ন্ত্রণ পাবেন।
Flexbox Layout তৈরি করার উদাহরণ:
1. Flexbox কনটেইনার এবং আইটেম তৈরি করা:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Layout with Pure.CSS</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
/* Flexbox Container */
.flex-container {
display: flex;
justify-content: space-between; /* Space between the items */
align-items: center; /* Align items vertically */
padding: 20px;
background-color: #4CAF50;
color: white;
}
.flex-item {
background-color: #8BC34A;
padding: 20px;
text-align: center;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
</body>
</html>
ব্যাখ্যা:
display: flex;: এটি Flexbox কন্টেইনারটি সক্রিয় করে, যার মাধ্যমে সমস্ত গ্রিড আইটেমগুলির মধ্যে লেআউট নিয়ন্ত্রণ করা হয়।justify-content: space-between;: এটি উপাদানগুলির মধ্যে সমান জায়গা ফেলে দেয়।align-items: center;: এটি আইটেমগুলোকে উল্লম্বভাবে কেন্দ্রিত করে।.flex-item: ফ্লেক্স আইটেমের জন্য ব্যাকগ্রাউন্ড কালার, প্যাডিং, এবং টেক্সট সেন্টারিং।
এটি একটি Flexbox Layout যেখানে তিনটি উপাদান সমানভাবে ছড়িয়ে পড়েছে এবং উল্লম্বভাবে কেন্দ্রিত রয়েছে।
2. Flexbox Alignment and Ordering
Flexbox এর আরও একটি শক্তিশালী ফিচার হলো উপাদানগুলিকে align এবং order করা। এর মাধ্যমে আপনি উপাদানগুলির সাইজ এবং অবস্থান আরও নিয়ন্ত্রণ করতে পারেন।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Alignment and Ordering</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
/* Flexbox Container */
.flex-container {
display: flex;
justify-content: space-evenly;
align-items: flex-start; /* Align items at the top */
padding: 20px;
background-color: #4CAF50;
}
.flex-item {
background-color: #8BC34A;
padding: 20px;
text-align: center;
border-radius: 5px;
order: 0; /* Default order */
}
.flex-item.first {
order: 2; /* This will be the last item */
}
.flex-item.last {
order: -1; /* This will be the first item */
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item first">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item last">Item 3</div>
</div>
</body>
</html>
ব্যাখ্যা:
order: Flexbox আইটেমগুলির অর্ডার পরিবর্তন করার জন্যorderপ্রপার্টি ব্যবহার করা হয়। এখানেItem 1কে সর্বশেষে, এবংItem 3কে প্রথমে রাখার জন্যorder: 2এবংorder: -1ব্যবহার করা হয়েছে।align-items: flex-start;: উপাদানগুলোকে কন্টেইনারের শীর্ষে সজ্জিত করে।
এটি Flexbox-এ আইটেমগুলোর অর্ডার এবং সজ্জা নিয়ন্ত্রণ করার একটি উদাহরণ।
3. Flexbox with Wrap (Wrapping Items)
যখন আপনি Flexbox কন্টেইনারে অনেক আইটেম রাখবেন এবং কন্টেইনারের প্রশস্ততা সীমিত হবে, তখন আপনি Flexbox আইটেমগুলোকে পরবর্তী লাইনে স্থানান্তরিত করার জন্য wrap ব্যবহার করতে পারেন।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Wrap</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
/* Flexbox Container with Wrap */
.flex-container {
display: flex;
flex-wrap: wrap; /* Allow items to wrap */
justify-content: space-between;
padding: 20px;
background-color: #4CAF50;
}
.flex-item {
background-color: #8BC34A;
padding: 20px;
text-align: center;
border-radius: 5px;
width: 30%; /* Each item will take 30% width */
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
<div class="flex-item">Item 4</div>
<div class="flex-item">Item 5</div>
<div class="flex-item">Item 6</div>
</div>
</body>
</html>
ব্যাখ্যা:
flex-wrap: wrap;: এটি ফ্লেক্স কন্টেইনারে যদি আইটেমগুলি এক লাইনে ফিট না হয়, তবে সেগুলিকে পরবর্তী লাইনে স্থানান্তরিত হতে দেয়।width: 30%;: প্রতিটি আইটেমকে ৩০% প্রস্থ দেওয়া হয়েছে, যাতে তারা তিনটি কলামে ভাগ হয়ে যায়।margin-bottom: 20px;: আইটেমগুলোর মধ্যে কিছু স্থান রাখা হয়েছে।
এটি একটি ফ্লেক্সবক্স কন্টেইনারের উদাহরণ যেখানে আইটেমগুলো তাদের কন্টেইনারের সীমানা পূর্ণ না হলে পরবর্তী লাইনে চলে যাবে।
Pure.CSS ফ্রেমওয়ার্কের মাধ্যমে Flexbox ইন্টিগ্রেশন ওয়েব ডিজাইনে খুবই কার্যকরী এবং সহজ। Flexbox এর সাপোর্ট দ্বারা আপনি উপাদানগুলিকে লেআউট কন্টেইনারের মধ্যে নমনীয়ভাবে সাজাতে, সেন্টার করতে, অথবা স্ক্রীনের বিভিন্ন আকারে উপাদানগুলির অবস্থান পরিবর্তন করতে পারেন। Flexbox ব্যবহার করে আপনি দ্রুত রেসপনসিভ ওয়েব ডিজাইন তৈরি করতে পারবেন, যা সকল স্ক্রীনে সুন্দরভাবে কাজ করবে। Pure.CSS-এ Flexbox ইন্টিগ্রেশন আপনার ডিজাইনের ক্ষমতা আরও বৃদ্ধি করবে, এবং ছোট স্ক্রীনেও আপনার ওয়েবসাইটকে চমৎকারভাবে প্রদর্শিত করতে সহায়তা করবে।
Flexbox (ফ্লেক্সবক্স), যা Flexible Box Layout নামে পরিচিত, একটি CSS লেআউট মডেল যা ওয়েব পেজে উপাদানগুলির মধ্যে স্থান এবং বিন্যাস সহজেই নিয়ন্ত্রণ করতে সহায়তা করে। Flexbox ব্যবহারে আপনি উপাদানগুলিকে সারি বা কলামে সাজাতে, তাদের মধ্যে সমান স্থান দিতে, এবং বিভিন্ন স্ক্রীন সাইজের জন্য রেসপন্সিভ ডিজাইন তৈরি করতে পারেন। এটি ওয়েব ডিজাইনের সবচেয়ে শক্তিশালী এবং ফ্লেক্সিবল (নমনীয়) টুলগুলির একটি।
Pure.CSS একটি লাইটওয়েট এবং মিনিমালিস্ট CSS ফ্রেমওয়ার্ক, যা সহজে ওয়েব অ্যাপ্লিকেশন ডিজাইন করতে সহায়তা করে। যদিও Pure.CSS নিজে কোনো বিশেষ Flexbox সিস্টেম অন্তর্ভুক্ত করে না, তবুও এটি Flexbox এর সাথে পুরোপুরি ইন্টিগ্রেট করা যায়।
Flexbox কী এবং এর সুবিধাসমূহ:
Flexbox একটি এক্সটেনসিভ লেআউট সিস্টেম যা মূলত দুটি অংশে বিভক্ত:
- Flex Container: এটি সেই কন্টেইনার যা ফ্লেক্স আইটেমগুলিকে ধারণ করে।
- Flex Items: ফ্লেক্স কন্টেইনারের ভিতরের আইটেমগুলি যেগুলি ফ্লেক্সবক্সে অ্যালাইন (align) এবং সাজানো (justify) হয়।
Flexbox এর কিছু সুবিধা:
- নমনীয় লেআউট: উপাদানগুলির মধ্যে গ্যাপ এবং স্পেসিং স্বয়ংক্রিয়ভাবে সামঞ্জস্যপূর্ণ হয়, যা লেআউটকে আরও প্রোগ্রামযোগ্য এবং কাস্টমাইজযোগ্য করে তোলে।
- এলার্নিং এবং প্রয়োগে সহজ: Flexbox খুব সহজে অ্যাপ্লাই করা যায়, এবং এটি বিভিন্ন ডিভাইসে রেসপন্সিভ লেআউট তৈরি করতে সহায়তা করে।
- উপাদানের অ্যালাইনমেন্ট: উপাদানগুলি অনুভূমিক বা উল্লম্বভাবে অ্যালাইন করা সহজ।
- ওভারফ্লো কন্ট্রোল: Flexbox এর মাধ্যমে আপনি সহজে কন্টেইনারের মধ্যে উপাদানগুলোকে অপ্রয়োজনীয়ভাবে পুশ করতে পারেন এবং স্ক্রীন সাইজ পরিবর্তিত হলে উপাদানগুলির অবস্থান নিয়ন্ত্রণ করতে পারেন।
Pure.CSS এর সাথে Flexbox এর Integration
যদিও Pure.CSS নিজে কোনো ফ্লেক্সবক্স ক্লাস সরবরাহ করে না, তবে Pure.CSS এর গ্রিড সিস্টেম এবং কাস্টম স্টাইলের সাথে Flexbox এর ইন্টিগ্রেশন সহজেই করা সম্ভব।
1. Flexbox এর জন্য Flex Container ও Flex Items তৈরি করা
Pure.CSS এর .pure-g এবং .pure-u- classes* ফ্লেক্সবক্সের মত কাজ করতে পারে, তবে এখানে Flexbox এর শক্তিশালী কন্ট্রোলের জন্য কিছু কাস্টম স্টাইল করা যাবে।
Flexbox Container এবং Items Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="path/to/pure-min.css">
<title>Flexbox with Pure.CSS</title>
<style>
/* Flex Container */
.flex-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background-color: #f4f4f4;
}
/* Flex Items */
.flex-item {
background-color: #4CAF50;
padding: 20px;
color: white;
margin: 10px;
flex-grow: 1;
text-align: center;
}
/* Ensuring Flexbox behavior on smaller screens */
@media (max-width: 600px) {
.flex-container {
flex-direction: column;
}
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
</body>
</html>
ব্যাখ্যা:
display: flex: এটি flex-container ক্লাসের জন্য একটি ফ্লেক্স কন্টেইনার তৈরি করে।justify-content: space-between: এটি উপাদানগুলির মধ্যে স্থান সুষমভাবে বিতরণ করে।align-items: center: এটি উপাদানগুলিকে উল্লম্বভাবে কেন্দ্রিত করে।flex-grow: 1: ফ্লেক্স আইটেমকে উল্লম্বভাবে প্রসারিত হতে দেয় এবং বাকি প্রস্থটি গ্রহন করে।@media: এটি স্ক্রীন সাইজ 600px এর কম হলে ফ্লেক্স কন্টেইনারের ভিতরের আইটেমগুলিকে কলাম আকারে সাজানোর জন্য ব্যবহৃত হয়েছে।
এটি একটি রেসপন্সিভ ফ্লেক্সবক্স লেআউট তৈরি করে, যেখানে Flex Items স্ক্রীন সাইজের উপর ভিত্তি করে সজ্জিত হয়।
2. Flexbox এর মাধ্যমে Vertical and Horizontal Alignment
Flexbox এর মাধ্যমে আপনি উপাদানগুলিকে অনুভূমিক এবং উল্লম্বভাবে কেন্দ্রিত করতে পারেন।
Example: Centering Elements Vertically and Horizontally
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="path/to/pure-min.css">
<title>Centering with Flexbox</title>
<style>
.flex-center-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* Full height of the viewport */
background-color: #e0e0e0;
}
.flex-center-item {
padding: 20px;
background-color: #007bff;
color: white;
text-align: center;
}
</style>
</head>
<body>
<div class="flex-center-container">
<div class="flex-center-item">Centered Item</div>
</div>
</body>
</html>
ব্যাখ্যা:
justify-content: center: এটি উপাদানগুলিকে অনুভূমিকভাবে কেন্দ্রিত করে।align-items: center: এটি উপাদানগুলিকে উল্লম্বভাবে কেন্দ্রিত করে।height: 100vh: এটি কন্টেইনারকে পুরো স্ক্রীনের উচ্চতায় প্রসারিত করে।
এটি একটি flexbox সেন্টারিং লেআউট তৈরি করে, যেখানে একক উপাদানটি পুরো স্ক্রীনে সেন্টার করা হবে।
3. Using Pure.CSS Grid System with Flexbox
Pure.CSS এর Grid System এবং Flexbox এর সংমিশ্রণ দিয়ে আরো উন্নত লেআউট তৈরি করা যেতে পারে। Pure.CSS এর Grid System হল ১২ কলামের একটি সিস্টেম, যেখানে flexbox এর শক্তি যোগ করে আরও ফ্লেক্সিবল এবং রেসপন্সিভ লেআউট তৈরি করা সম্ভব।
Grid System + Flexbox Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="path/to/pure-min.css">
<title>Grid + Flexbox</title>
<style>
.flex-container {
display: flex;
justify-content: space-between;
padding: 20px;
}
.pure-u-1-2 {
flex: 0 0 48%;
margin: 10px;
background-color: #f4f4f4;
padding: 20px;
}
@media (max-width: 600px) {
.flex-container {
flex-direction: column;
}
}
</style>
</head>
<body>
<div class="flex-container">
<div class="pure-u-1-2">Flexbox + Grid Item 1</div>
<div class="pure-u-1-2">Flexbox + Grid Item 2</div>
</div>
</body>
</html>
ব্যাখ্যা:
- Flexbox সিস্টেমটি সোজা করে দিয়েছিল কলামগুলির জন্য স্থান এবং Pure.CSS Grid সিস্টেমটি ব্যবহার করে ফ্লেক্স আইটেমগুলির অবস্থান এবং সাইজ কন্ট্রোল করছে।
pure-u-1-2: এটি Flexbox এর মাধ্যমে নির্দিষ্ট সাইজে কলাম তৈরি করতে সহায়তা করে।
Flexbox এবং Pure.CSS একসাথে ব্যবহার করা একটি শক্তিশালী কৌশল, যেটি আপনার ওয়েব ডিজাইনকে আরও ফ্লেক্সিবল এবং রেসপন্সিভ করে তোলে। আপনি Pure.CSS এর গ্রিড সিস্টেমের সাথে Flexbox এর শক্তি ব্যবহার করে খুব সহজে এবং দ্রুত ডাইনামিক ওয়েব লেআউট তৈরি করতে পারবেন। Flexbox এর মাধ্যমে আপনি অনুভূমিক এবং উল্লম্বভাবে উপাদানগুলি অ্যালাইন এবং সেন্টার করতে পারেন, যা একটি অত্যন্ত শক্তিশালী ডিজাইন টুল।
Pure.CSS একটি লাইটওয়েট এবং সিম্পল CSS ফ্রেমওয়ার্ক যা Flexbox Layouts তৈরি করতে সহায়তা করে। Flexbox হল একটি CSS লেআউট মডেল যা এলিমেন্টগুলিকে একে অপরের সঙ্গে অটোমেটিক্যালি যথাযথভাবে সাজাতে সহায়ক, বিশেষত যখন আপনার লেআউটে বিভিন্ন সাইজের উপাদান থাকে। Pure.CSS আপনাকে Flexbox লেআউট তৈরির জন্য খুব সহজ এবং কার্যকর পদ্ধতি প্রদান করে।
এখানে Pure.CSS দিয়ে Flexbox Layouts তৈরি করার কয়েকটি উদাহরণ দেওয়া হল:
1. Basic Flexbox Layout in Pure.CSS
Flexbox ব্যবহার করে একটি সাধারণ লেআউট তৈরি করা যেটি একাধিক উপাদানকে এক লাইনে সাজায়।
Basic Flexbox Layout Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="path/to/pure-min.css">
<style>
.flex-container {
display: flex; /* Enable Flexbox */
justify-content: space-between; /* Distribute items evenly */
padding: 10px;
background-color: #f0f0f0;
}
.flex-item {
background-color: #4CAF50;
color: white;
padding: 20px;
width: 30%;
text-align: center;
}
</style>
<title>Basic Flexbox Layout</title>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
</body>
</html>
ব্যাখ্যা:
display: flex;: Flexbox এলিমেন্ট তৈরি করতে এই প্রপার্টি ব্যবহার করা হয়েছে।justify-content: space-between;: এলিমেন্টগুলিকে একে অপর থেকে সমান ব্যবধানে সাজানোর জন্য।.flex-item: প্রতিটি ফ্লেক্স আইটেমের জন্য ৩০% প্রস্থ, ব্যাকগ্রাউন্ড কালার এবং প্যাডিং সহ স্টাইল করা হয়েছে।
এটি একটি basic Flexbox layout, যেখানে তিনটি ফ্লেক্স আইটেম সমানভাবে সাজানো হয়েছে এবং তাদের মধ্যে যথাযথ ব্যবধান রাখা হয়েছে।
2. Flexbox Layout with Centered Items
এটি একটি ফ্লেক্স কন্টেইনার তৈরি করবে যার মধ্যে এলিমেন্টগুলি কেন্দ্রস্থলে থাকবে।
Centering Flex Items Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="path/to/pure-min.css">
<style>
.flex-container {
display: flex;
justify-content: center; /* Horizontally center items */
align-items: center; /* Vertically center items */
height: 100vh; /* Full viewport height */
background-color: #f0f0f0;
}
.flex-item {
background-color: #4CAF50;
color: white;
padding: 20px;
width: 200px;
text-align: center;
}
</style>
<title>Centered Flexbox Layout</title>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Centered Item</div>
</div>
</body>
</html>
ব্যাখ্যা:
justify-content: center;: এলিমেন্টগুলিকে অনুভূমিকভাবে কেন্দ্রস্থলে স্থাপন করার জন্য।align-items: center;: এলিমেন্টগুলিকে উল্লম্বভাবে কেন্দ্রস্থলে রাখার জন্য।height: 100vh;: কন্টেইনারের উচ্চতা সম্পূর্ণ ভিউপোর্টের সমান।
এটি একটি centered Flexbox layout, যেখানে একটি এলিমেন্ট পুরো স্ক্রীনের মাঝখানে অবস্থান করছে।
3. Flexbox Layout with Row and Column Directions
Flexbox এর একটি শক্তিশালী বৈশিষ্ট্য হলো আপনি এটি row অথবা column আর্কিটেকচারে সাজাতে পারেন।
Row and Column Flexbox Layout Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="path/to/pure-min.css">
<style>
/* Flex Row */
.flex-row {
display: flex;
flex-direction: row; /* Arrange items in a row */
justify-content: space-around;
background-color: #f0f0f0;
padding: 20px;
}
.flex-item {
background-color: #4CAF50;
color: white;
padding: 20px;
width: 30%;
text-align: center;
}
/* Flex Column */
.flex-column {
display: flex;
flex-direction: column; /* Arrange items in a column */
justify-content: space-between;
background-color: #f0f0f0;
padding: 20px;
height: 100vh;
}
</style>
<title>Row and Column Flexbox Layout</title>
</head>
<body>
<!-- Row Layout -->
<div class="flex-row">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
<!-- Column Layout -->
<div class="flex-column">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
</body>
</html>
ব্যাখ্যা:
flex-direction: row;: এলিমেন্টগুলোকে row আর্কিটেকচারে সাজানোর জন্য।flex-direction: column;: এলিমেন্টগুলোকে column আর্কিটেকচারে সাজানোর জন্য।justify-content: space-around;: এলিমেন্টগুলিকে একে অপর থেকে সমান ব্যবধানে সাজানোর জন্য।
এই উদাহরণটি দুইটি ভিন্ন Flexbox লেআউট দেখায়: একটি row layout এবং একটি column layout।
4. Flexbox Layout with Equal Height Items
Flexbox এর মাধ্যমে আপনি এমন লেআউট তৈরি করতে পারেন, যেখানে সব এলিমেন্টের উচ্চতা সমান থাকে।
Equal Height Flexbox Layout Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="path/to/pure-min.css">
<style>
.flex-container {
display: flex;
justify-content: space-between;
background-color: #f0f0f0;
padding: 20px;
}
.flex-item {
background-color: #4CAF50;
color: white;
text-align: center;
flex-grow: 1; /* Make items grow equally */
margin: 5px;
padding: 20px;
}
</style>
<title>Equal Height Flexbox Layout</title>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
</body>
</html>
ব্যাখ্যা:
flex-grow: 1;: এটি এলিমেন্টগুলিকে সমান উচ্চতা ও প্রস্থে প্রসারিত করতে সহায়ক।justify-content: space-between;: এলিমেন্টগুলিকে একটি নির্দিষ্ট ব্যবধানে ছড়িয়ে দেওয়ার জন্য।
এই কোডে, তিনটি এলিমেন্টের উচ্চতা এবং প্রস্থ একে অপরের সমান হবে এবং তারা flex-grow এর মাধ্যমে একে অপরকে পূর্ণ করবে।
5. Flexbox Layout with Nested Items
Flexbox দিয়ে আপনি নেস্টেড (nested) এলিমেন্টের জন্যও লেআউট তৈরি করতে পারেন। এটি বিভিন্ন উপাদানকে একাধিক স্তরে সাজাতে সাহায্য করে।
Nested Flexbox Layout Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="path/to/pure-min.css">
<style>
.flex-container {
display: flex;
justify-content: space-between;
background-color: #f0f0f0;
padding: 20px;
}
.flex-item {
background-color:
#4CAF50; color: white; text-align: center; padding: 20px; width: 30%; }
.nested-container {
display: flex;
flex-direction: column;
}
.nested-item {
background-color: #555;
color: white;
padding: 10px;
margin: 5px;
}
ব্যাখ্যা:
.nested-container: নেস্টেড ফ্লেক্স কন্টেইনার তৈরি করা হয়েছে।.nested-item: নেস্টেড আইটেমগুলোকে কলামে সাজানো হয়েছে।
এই উদাহরণটি nested flex items নিয়ে কাজ করছে, যেখানে প্রতিটি প্রধান ফ্লেক্স আইটেমের মধ্যে আরও ছোট ফ্লেক্স আইটেম রয়েছে।
Pure.CSS এর মাধ্যমে Flexbox Layouts তৈরি করা খুবই সহজ এবং কার্যকর। আপনি flex-direction, justify-content, align-items, flex-grow এবং অন্যান্য Flexbox প্রোপার্টি ব্যবহার করে যেকোনো ধরনের লেআউট তৈরি করতে পারেন। এটি দ্রুত এবং ফ্লেক্সিবল ডিজাইন তৈরির জন্য একটি শক্তিশালী টুল। Flexbox দিয়ে তৈরি লেআউটগুলি রেসপন্সিভ, ফ্লেক্সিবল এবং মোবাইল-ফ্রেন্ডলি হয়।
Pure.CSS এর সাথে Flexbox ব্যবহার করে Responsive Design তৈরি করা অত্যন্ত সহজ এবং কার্যকরী। Flexbox একটি CSS প্রযুক্তি যা ওয়েব পেজের লেআউট দ্রুত এবং সহজভাবে তৈরি করতে সহায়তা করে। এটি বিভিন্ন স্ক্রীন সাইজ অনুযায়ী উপাদানগুলোকে সঠিকভাবে সাজানোর জন্য উপযুক্ত। Pure.CSS দিয়ে Flexbox ব্যবহার করে রেসপন্সিভ ডিজাইন তৈরি করলে আপনার ওয়েব পেজ বিভিন্ন ডিভাইসে সুন্দরভাবে প্রদর্শিত হবে।
Flexbox এর মূল ধারণা:
Flexbox একটি লেআউট মডেল যা এক বা একাধিক উপাদানকে সোজা বা কাস্টমভাবে সাজানোর জন্য ব্যবহৃত হয়। Flexbox এর মাধ্যমে আপনি উপাদানগুলোকে সোজা রেখেও তাদের মধ্যে গ্যাপ এবং স্পেস কন্ট্রোল করতে পারবেন, এবং উপাদানগুলির আকার এবং বিন্যাস সহজে পরিবর্তন করতে পারবেন।
Pure.CSS এর সাথে Flexbox ব্যবহার:
Pure.CSS নিজেই Flexbox এর জন্য বিল্ট-ইন স্টাইল প্রদান করে না, তবে আপনি নিজেই flex ক্লাস ব্যবহার করে উপাদানগুলোকে Flexbox লেআউটের মধ্যে সাজাতে পারেন। Pure.CSS গ্রিড সিস্টেমের সাথে Flexbox ব্যবহার করে আপনি রেসপন্সিভ ওয়েব পেজ ডিজাইন করতে পারবেন।
উদাহরণ ১: Flexbox এর মাধ্যমে Responsive Design
এখানে, একটি সিম্পল Flexbox Layout তৈরি করা হয়েছে যা বিভিন্ন স্ক্রীন সাইজে সঠিকভাবে কাজ করবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Flexbox Design</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
.container {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.item {
flex: 1 1 30%;
background-color: #f2f2f2;
padding: 20px;
text-align: center;
border: 1px solid #ddd;
}
/* For smaller screens */
@media (max-width: 768px) {
.item {
flex: 1 1 45%;
}
}
/* For mobile screens */
@media (max-width: 480px) {
.item {
flex: 1 1 100%;
}
}
</style>
</head>
<body>
<div class="container pure-g">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html>
ব্যাখ্যা:
- display: flex:
containerক্লাসের মাধ্যমে Flexbox লেআউট চালু করা হয়েছে, যার ফলে এর মধ্যে থাকা উপাদানগুলি সোজা হয়ে থাকবে। - flex-wrap: wrap: এটি Flexbox-এর উপাদানগুলোকে একে অপরের উপরে চলে না গিয়ে একটি নতুন লাইনে সাজাতে সহায়তা করে।
- flex: 1 1 30%: এটি প্রতিটি আইটেমের জন্য বেসিক ফ্লেক্স সাইজ নির্ধারণ করে, যেখানে ৩০% প্রস্থ দেওয়া হয়েছে (ডেস্কটপের জন্য)।
- @media (max-width: 768px): এই মিডিয়া কুয়েরি ৭৬৮ পিক্সেলের কম স্ক্রীনে (ট্যাবলেট) ফ্লেক্স আইটেমের আকার ৪৫% করা হয়েছে।
- @media (max-width: 480px): এই মিডিয়া কুয়েরি ৪৮০ পিক্সেলের কম স্ক্রীনে (মোবাইল) ফ্লেক্স আইটেমের আকার ১০০% করা হয়েছে, যাতে প্রতিটি আইটেম সম্পূর্ণ প্রস্থে প্রদর্শিত হয়।
উদাহরণ ২: Flexbox Grid Layout with Pure.CSS
এখানে, Pure.CSS এর গ্রিড সিস্টেম ব্যবহার করে Flexbox এর সাথে আরও উন্নত রেসপন্সিভ লেআউট তৈরি করা হয়েছে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Grid with Pure.CSS</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
.container {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.item {
flex: 1 1 30%;
background-color: #f2f2f2;
padding: 20px;
text-align: center;
border: 1px solid #ddd;
}
/* For smaller screens */
@media (max-width: 768px) {
.item {
flex: 1 1 45%;
}
}
/* For mobile screens */
@media (max-width: 480px) {
.item {
flex: 1 1 100%;
}
}
</style>
</head>
<body>
<div class="container pure-g">
<div class="item pure-u-1-3">Item 1</div>
<div class="item pure-u-1-3">Item 2</div>
<div class="item pure-u-1-3">Item 3</div>
<div class="item pure-u-1-3">Item 4</div>
<div class="item pure-u-1-3">Item 5</div>
<div class="item pure-u-1-3">Item 6</div>
</div>
</body>
</html>
ব্যাখ্যা:
- pure-u-1-3: Pure.CSS এর গ্রিড সিস্টেমের ক্লাস যা প্রতিটি আইটেমের প্রস্থ ১-৩ ভাগে ভাগ করে, অর্থাৎ ৩টি কলামে ভেঙে দেখাবে।
- Flexbox Layout: Flexbox এর মাধ্যমে flex-wrap: wrap দিয়ে গ্রিড এলিমেন্টগুলিকে মোবাইল, ট্যাবলেট এবং ডেস্কটপ স্ক্রীনে সুন্দরভাবে দেখানো হচ্ছে।
- Media Queries: মিডিয়া কুয়েরি ব্যবহার করে গ্রিড সিস্টেমটি আরও ছোট স্ক্রীনে সঠিকভাবে উপস্থাপন করা হচ্ছে।
৩. Flexbox Column Layout for Mobile-First Design
মোবাইল-ফার্স্ট ডিজাইনের জন্য Flexbox এর মাধ্যমে একটি কলাম লেআউট তৈরি করা যা স্ক্রীনের আকার অনুযায়ী উপাদানগুলিকে সাজাবে।
উদাহরণ: Mobile-First Flexbox Column Layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Column Layout</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
.container {
display: flex;
flex-direction: column;
gap: 20px;
}
.item {
background-color: #f2f2f2;
padding: 20px;
text-align: center;
border: 1px solid #ddd;
}
/* For larger screens */
@media (min-width: 768px) {
.container {
flex-direction: row;
}
.item {
flex: 1;
}
}
</style>
</head>
<body>
<div class="container pure-g">
<div class="item pure-u-1-3">Item 1</div>
<div class="item pure-u-1-3">Item 2</div>
<div class="item pure-u-1-3">Item 3</div>
</div>
</body>
</html>
ব্যাখ্যা:
- flex-direction: column: প্রথমে উপাদানগুলো কলামে সাজানো থাকবে (মোবাইল স্ক্রীনে)।
- @media (min-width: 768px): যখন স্ক্রীন ৭৬৮px বা তার বেশি হবে (ট্যাবলেট বা ডেস্কটপ), Flexbox উপাদানগুলোকে রো-এ (row) সাজাবে এবং প্রতিটি আইটেমের প্রস্থ সমান হবে।
Flexbox এর মাধ্যমে Pure.CSS ব্যবহার করে রেসপন্সিভ ডিজাইন তৈরি করা খুবই সহজ এবং দ্রুত। এটি আপনাকে ওয়েব পেজের উপাদানগুলোকে বিভিন্ন স্ক্রীন সাইজ অনুযায়ী সঠিকভাবে সাজানোর ক্ষমতা প্রদান করে। Pure.CSS এবং Flexbox এর সংমিশ্রণ দিয়ে আপনি মোবাইল-ফার্স্ট, রেসপন্সিভ এবং স্কেলেবল ওয়েব ডিজাইন তৈরি করতে পারবেন।
Flexbox হলো CSS এর একটি অত্যন্ত শক্তিশালী এবং নমনীয় লেআউট মডেল, যা ওয়েব ডিজাইনে উপাদানগুলিকে সহজভাবে সাজানোর জন্য ব্যবহৃত হয়। Pure.CSS ফ্রেমওয়ার্কের সাথে Flexbox ব্যবহার করে আপনি রেসপনসিভ এবং ফ্লেক্সিবল লেআউট তৈরি করতে পারেন। এখানে আমরা Flexbox এর Best Practices নিয়ে আলোচনা করব, যা আপনার ওয়েব ডিজাইনকে আরও কার্যকরী এবং স্কেলেবল করতে সাহায্য করবে।
1. Flexbox এর মূল ধারণা
Flexbox ব্যবহার করতে হলে আপনাকে দুটি মূল কনসেপ্ট বুঝতে হবে:
- Flex container: এটি হলো সেই কন্টেইনার যেটি Flexbox সিস্টেমে কাজ করবে। এটি
display: flex;বাdisplay: inline-flex;দ্বারা ঘোষণা করা হয়। - Flex items: কন্টেইনারের মধ্যে থাকা উপাদানগুলোই Flex items।
Basic Example of Flexbox:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Basic Example</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
.flex-container {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f4f4f4;
padding: 20px;
}
.flex-item {
background-color: #4CAF50;
padding: 20px;
color: white;
text-align: center;
margin: 5px;
width: 100px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
</body>
</html>
Flexbox Best Practices
2. Flex Direction:
flex-direction প্রপার্টি ব্যবহার করে আপনি ফ্লেক্স কন্টেইনারে উপাদানগুলির কাস্টম অর্ডার নির্ধারণ করতে পারেন। এটি সাধারণত দুটি অর্ডারে কাজ করে:
- row (ডিফল্ট): উপাদানগুলি এক লাইনে (horizontal) প্রদর্শিত হবে।
- column: উপাদানগুলি এক কলামে (vertical) প্রদর্শিত হবে।
Best Practice: যদি আপনি মোবাইল স্ক্রীনে উপাদানগুলিকে এক কলামে (vertical) সাজাতে চান এবং বড় স্ক্রীনে এক লাইনে (horizontal), তবে media query ব্যবহার করে flex-direction পরিবর্তন করুন।
@media (max-width: 600px) {
.flex-container {
flex-direction: column;
}
}
3. Flex Wrap:
Flexbox কন্টেইনারে উপাদানগুলি যদি এক লাইনে না এলে, আপনি flex-wrap ব্যবহার করে উপাদানগুলোকে পরবর্তী লাইনে স্থানান্তর করতে পারেন।
- nowrap (ডিফল্ট): উপাদানগুলো এক লাইনে রাখে।
- wrap: উপাদানগুলো পরবর্তী লাইনে চলে যাবে।
Best Practice: যখন আপনার লেআউট এডজাস্ট করতে হবে বা ছোট স্ক্রীনে বেশি উপাদান প্রদর্শিত হবে, তখন flex-wrap: wrap ব্যবহার করুন।
.flex-container {
display: flex;
flex-wrap: wrap;
}
4. Justify Content:
justify-content ব্যবহার করে Flexbox কন্টেইনারে উপাদানগুলির মধ্যে স্পেস বিতরণ করা হয়।
- flex-start: উপাদানগুলি কন্টেইনারের শুরুতে সজ্জিত হবে।
- center: উপাদানগুলি কন্টেইনারের মাঝে সজ্জিত হবে।
- space-between: উপাদানগুলির মধ্যে সমান স্পেস থাকবে।
- space-around: উপাদানগুলির চারপাশে সমান স্পেস থাকবে।
Best Practice: যদি আপনি একাধিক উপাদানকে সঠিকভাবে কন্টেইনারের মধ্যে সজ্জিত করতে চান, তবে justify-content ব্যবহার করুন। উদাহরণস্বরূপ, center ব্যবহার করে উপাদানগুলিকে মাঝখানে সজ্জিত করা যেতে পারে।
.flex-container {
display: flex;
justify-content: center;
}
5. Align Items:
align-items প্রপার্টি ফ্লেক্স কন্টেইনারের অভ্যন্তরে উপাদানগুলির উল্লম্ব অবস্থান নির্ধারণ করে।
- flex-start: উপাদানগুলি কন্টেইনারের শীর্ষে থাকবে।
- center: উপাদানগুলি কন্টেইনারের মাঝখানে থাকবে।
- stretch (ডিফল্ট): উপাদানগুলি কন্টেইনারের পুরো প্রস্থে প্রসারিত হবে।
Best Practice: যদি আপনি উপাদানগুলোকে উল্লম্বভাবে মাঝখানে রাখতে চান, তবে align-items: center ব্যবহার করুন।
.flex-container {
display: flex;
align-items: center;
}
6. Align Self:
align-self প্রপার্টি ব্যবহার করে Flexbox আইটেমের জন্য একক উপাদানের অবস্থান পরিবর্তন করা যায়। এটি align-items এর মতো কাজ করে, তবে এটি শুধুমাত্র নির্দিষ্ট উপাদানের জন্য কার্যকর।
Best Practice: যখন আপনি কেবল এক বা দুইটি উপাদানকে অন্য উপাদানগুলোর চেয়ে আলাদা করতে চান।
.flex-item {
align-self: flex-start;
}
7. Flex Grow, Flex Shrink, and Flex Basis:
flex-grow, flex-shrink, এবং flex-basis একসাথে ব্যবহার করে আপনি ফ্লেক্স আইটেমের আকার নিয়ন্ত্রণ করতে পারেন।
- flex-grow: এটি নির্ধারণ করে যে উপাদানটি কন্টেইনারের অতিরিক্ত স্পেস কতটা নেবে।
- flex-shrink: এটি নির্ধারণ করে যে উপাদানটি কন্টেইনারের অপ্রতুল স্পেসে কতটা সংকুচিত হবে।
- flex-basis: এটি নির্ধারণ করে যে উপাদানটির প্রাথমিক আকার কত হবে।
Best Practice: যদি আপনি কিছু উপাদানকে বেশি জায়গা নিতে বা সংকুচিত করতে চান, তবে flex-grow বা flex-shrink ব্যবহার করুন।
.flex-item {
flex-grow: 1; /* Takes up remaining space */
flex-shrink: 1; /* Shrinks if needed */
flex-basis: 200px; /* Default size of the item */
}
8. Flexbox for Centering Items:
একটি সাধারণ সমস্যা হলো Centering Items। Flexbox এর সাহায্যে সহজেই উপাদানগুলিকে কন্টেইনারের মধ্যে সেন্টার করা যায়।
Best Practice: Flexbox ব্যবহার করে উপাদানগুলোকে সহজে vertical এবং horizontalভাবে সেন্টার করতে পারবেন:
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* Ensure full height */
}
Flexbox একটি শক্তিশালী এবং নমনীয় লেআউট সিস্টেম যা ওয়েব ডিজাইনে সোজা এবং কার্যকরী উপায়ে উপাদানগুলিকে সাজানোর জন্য ব্যবহৃত হয়। Pure.CSS ফ্রেমওয়ার্কে Flexbox এর সাহায্যে আপনি খুব সহজে রেসপনসিভ এবং অ্যাডজাস্টেবল ওয়েব লেআউট তৈরি করতে পারেন। কিছু best practices যেমন flex-direction, flex-wrap, justify-content, align-items, এবং flex-grow/ flex-shrink ব্যবহারে আপনার ওয়েব ডিজাইন হবে আরও স্কেলেবল, রেসপনসিভ এবং ইউজার-ফ্রেন্ডলি।
Read more
